function $(selector) {
    return document.querySelector(selector)
}

// 通过id返回购物车里的内容 - [索引, item]
function getCartItemById(id) {
    const index = cartItems
        .findIndex(item => item.id === id)
    return [index, cartItems[index]]
}
//渲染
//渲染商品列表
let plist = document.querySelector('.plist')
function renderProductList() {
    plist.innerHTML = products.map(p => {
        // const [, item] = getCartItemById(p.id)
        return `<div class="item">
        <div class="title">${p.name} ${p.productType}</div>
        <img
          src="${p.image}"
        />
        <div class="price">
          <button class="add-cart-btn" data-id='${p.id}'>${p.price.regularPrice}元 加入购物车</button>
        </div>
        </div>`
    }).join('')
}
renderProductList()

//渲染购物车
let cart = $('.cart')
function renderProductListRight() {
    cart.innerHTML = products.map(p => {
        const [, item] = getCartItemById(p.id)
        return ` <div class="cart-item">
        <div class="title">${p.name} ${p.productType}</div>
        <img
          src="${p.image}"
        />
        <div class="">数量：<input type="number" size="3" value="${item?.count || 0}" /></div>
        <div>价格：${p.price.regularPrice}元</div>
        <div><button class="remove-cart-btn" data-id='${p.id}'>删除</button></div>
      </div>`
    }).join('')
}
renderProductListRight()